<template>
    <div class="projectquality">
      <div class="top">
        <div class="top-item">
            <span class="item-tip">检验时间:</span>
            <el-select value="0"  placeholder="时间段选择" size="mini" class="select">
                <el-option label="0:00" value="0"></el-option>
                <el-option label="8:00" value="1"></el-option>
            </el-select>
        </div>
        <div class="top-item">
            <span class="item-tip">零件名称:</span>
            <el-input  placeholder="请输入内容" size="mini" class="input"></el-input>
        </div>
        <div class="top-item">
            <span class="item-tip">工序名称:</span>
            <el-select value="0"  placeholder="请选择工序" size="mini" class="select">
                <el-option label="组装" value="0"></el-option>
                <el-option label="拆解" value="1"></el-option>
            </el-select>
        </div>
        <div class="top-item">
            <span class="item-tip">机台号:</span>
            <el-select value="0"  placeholder="请选择机台号" size="mini" class="select">
                <el-option label="5号" value="0"></el-option>
                <el-option label="8号" value="1"></el-option>
            </el-select>
        </div>
      </div>
      <div class="center">
        <el-button type="primary" size="small" style="width:100px;">查询</el-button>
      </div>
      <div class="bottom" id="chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data(){
        return {

        }
    },
    mounted() {
        let myChart = echarts.init(document.getElementById('chart'));
        this.initEchart(myChart);
        window.addEventListener('resize',function(){
            myChart.resize();
        });
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.initEchart());
    },
    methods:{
        //绘制图表
        initEchart(dom){
            const option = {
                legend: {
                    width:'auto',
                    data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00', '02:00', '04:00', '06:00'],
                    icon: ''
                    // ...
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: false // 隐藏 x 轴标签
                    },
                    axisTick: {
                        show: false // 隐藏 x 轴刻度
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'8:00',
                        data: [150, 230, 224, 218, 135, 147],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'10:00',
                        data: [120, 200, 204, 208, 105, 47],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'12:00',
                        data: [50, 30, 124, 118, 105, 107],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'14:00',
                        data: [50, 10, 40, 100, 60, 200],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'16:00',
                        data: [10, 50, 104, 108, 200, 70],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'18:00',
                        data: [50, 30, 124, 118, 105, 107],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'20:00',
                        data: [20, 40, 114, 110, 120, 87],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'22:00',
                        data: [50, 30, 124, 118, 105, 107],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'24:00',
                        data: [50, 30, 124, 118, 105, 107],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'02:00',
                        data: [50, 30, 124, 118, 105, 107],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'04:00',
                        data: [50, 30, 124, 118, 105, 107],
                        type: 'line',
                        stack: 'x'
                    },
                    {
                        name:'06:00',
                        data: [50, 30, 124, 118, 105, 107],
                        type: 'line',
                        stack: 'x'
                    }
                ]
            };
            dom.setOption(option);
        }
    }
}
</script>

<style lang='scss' scoped>
.projectquality{
    width: 100vw;
    height: 100vh;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    .top{
        flex:2;
        display: flex;
        flex-wrap: wrap;
        .top-item{
            width: 30vw;
            display: flex;
            align-items: center;
            .item-tip{
                width: 80px;
            }
            .select{
                width: 200px;
            }
            .input{
                width: 200px;
            }
        }
    }
    .center{
        flex:2;
    }
    .bottom{
        flex:6;
    }
}
</style>